<div (init)="onInit()" class="chronicon-tooltip" [style.display]="skill == null ? 'none': 'block'" [style.left]="left" [style.top]="top">
    <div *ngIf="skill != null" class="skill-tooltip-body">
        <div class="skill-tooltip-header">
            <div class="skill-tooltip-icon" [style.clip-path]="iconClipPath" [style.background]="iconBackground"></div>
            <div class="skill-tooltip-name-element">
                <div class="skill-tooltip-name">{{skill.name}}</div>
                <div *ngIf="!unlockable" class="skill-tooltip-requires">Requires {{skill.minLevel}} points spent to unlock</div>
                <div class="skill-tooltip-element" [style.color]="color">{{skill.elementName}}</div>
            </div>
        </div>
        <div class="skill-tooltip-type">{{skill.typeName}}{{family}}</div>
        <div *ngFor="let tag of skill.tags" class="skill-tooltip-tag">{{tag.titleCase}} Skill</div>
        <div *ngIf="skill.tags.contains('base')" class="skill-tooltip-base">Restores 4% mana</div>
        <div *ngIf="(skill.manaCostMinLevel != null && skill.manaCostMaxLevel != null) || skill.cooldown != null">
            <span *ngIf="skill.manaCostMinLevel != null && skill.manaCostMaxLevel != null"><span class="skill-tooltip-mana">{{skill.manaCost(level)}}</span> mana</span><span *ngIf="skill.manaCostMinLevel != null && skill.manaCostMaxLevel != null && skill.cooldown != null">, </span>
            <span *ngIf="skill.cooldown != null"><span class="skill-tooltip-type">{{skill.cooldown}}</span> seconds cooldown</span>
        </div>
        <div class="skill-tooltip-rank">Rank {{rank}}<span *ngIf="skill.maxRank != null">/{{skill.maxRank}}</span></div>
        <div class="hr"></div>
        <skill-text class="skill-tooltip-desc" [skill]="skill" [rank]="rank" [desc]="skill.desc"></skill-text>
        <div *ngIf="showNextRank" class="skill-tooltip-type">{{nextRankHeader}}</div>
        <skill-text *ngIf="showNextRank" class="skill-tooltip-next-rank-desc" [skill]="skill" [rank]="nextOrMax ? rank+1 : skill.maxRank" [desc]="skill.rankUpDesc"></skill-text>
    </div>
</div>
